<template>
    <div class='bx'>
        <el-col class="docketprint" id="printMe" ref="printContent">
        <p style='float:right'>编号_{{List.examId}}__</p><br/><br/>
        <div style='margin:10% auto;width:50%;'>
        <h1 style='margin-left:45%'>试卷袋</h1>
           <el-form :model="formInline" class="demo-form-inline">
                <el-form-item label="考试期次:" style='margin:60px 125px;'>
                <el-input placeholder="请输入" :disabled="true" v-model="List.examPeriod" style='width:190px'></el-input>
                </el-form-item>
                <el-form-item style='margin-left:60px;'>
                <div v-for="(item, index) in formInline.options" :key="index">
                    <el-input placeholder="请输入名称"  v-model="item.optionsName" 
                     style='border:none;margin-top:12px;width:25%'></el-input>
                     &nbsp;
                    <el-input placeholder="请输入内容" v-model='item.optionsValue' style='border:none;width:50%'></el-input>
                </div>
                
                </el-form-item>
                
            </el-form>
        </div> 
        </el-col>
            <el-button style='float:right;margin-left:10px;' v-print="printObj">打印</el-button>
            <el-button style='float:right' @click='addOut'>添加</el-button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      printObj: {
        id: "printMe", //打印区域 Dom ID
        popTitle: "打印页面标题文字",
        extraCss: "https://www.google.com,https://www.google.com",
        extraHead:
          '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>' //  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
      },
      formInline: {
        options: []
      },
      List:[],
    };
  },
  mounted() {
    this.List=this.$route.params.list;
    console.log('456',this.List)
  },
  methods: {
    addOut() {
      this.formInline.options.push({ optionsName: "", optionsValue: "" });
    },

  }
};
</script>

<style lang='scss' scoped >
.bx {
  width: 90%;
  margin: 0 auto;
  background: #ffffff;
}
.demo-form-inline {
  width: 100%;
  height: 100%;
}
.docketprint{
  border: 1px solid #ccc;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>
